<template>
  <div class="app-container">
    <el-row :gutter="40">
      <el-col :sm="24" :lg="6" v-for="item in totalList" :key="item">
        <panel-group :data="item"></panel-group>
      </el-col>
    </el-row>

    <el-table
      v-loading="listLoading"
      :data="list"
      style="margin-top:30px"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID">
        <template slot-scope="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column align="center" label="买家手机号">
        <template slot-scope="scope">{{ scope.row.username }}</template>
      </el-table-column>
      <el-table-column align="center" label="订单物品">
        <template slot-scope="scope">{{ scope.row.ordername }}</template>
      </el-table-column>
      <el-table-column label="购买日期" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.buy_time }}</span>
        </template>
      </el-table-column>
      <el-table-column label="序列码" align="center">
        <template slot-scope="scope">{{ scope.row.serial_number }}</template>
      </el-table-column>
      <el-table-column label="快递码" align="center">
        <template slot-scope="scope">{{ scope.row.express_number }}</template>
      </el-table-column>
      <el-table-column label="申请信息" align="center">
        <template slot-scope="scope">{{ scope.row.content }}</template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="操作" width="250">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" icon="el-icon-check">同意申请</el-button>
          <el-button type="danger" size="mini" icon="el-icon-delete">拒绝申请</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import PanelGroup from "@/components/PanelGroup";
export default {
  data() {
    return {
      list: null,
      listLoading: true,
      totalList: [
        {
          icon: "el-icon-star-on",
          title: "今日新增订单数",
          total: "102",
        },
        {
          icon: "el-icon-star-on",
          title: "本月新增订单数",
          total: "102",
        },
        {
          icon: "el-icon-star-on",
          title: "总数量",
          total: "3000",
        },
      ],
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      this.list = [
        {
          id: 1,
          username: "15722222222",
          ordername: "鞋子",
          buy_time: "2020.2.2",
          serial_number: "xuliehao13133113331",
          express_number: "kuaidi657646464446",
          content: "我需要保修，希望官方大大可以帮我修一下",
        },
        {
          id: 1,
          username: "15722222222",
          ordername: "鞋子",
          buy_time: "2020.2.2",
          serial_number: "xuliehao13133113331",
          express_number: "kuaidi657646464446",
          content: "我需要保修，希望官方大大可以帮我修一下",
        },
      ];
      this.listLoading = false;
    },
  },
  components: {
    PanelGroup,
  },
};
</script>
